<template>
  <view class="console-top">
    <view class="shop-info-wrap">
      <ShopInfo @changeStatus="handleChangeStatus" />
    </view>
    <!-- <view class="select-box-wrap">
      <SelectBox @change="handleChangeDate" />
    </view>-->
    <!-- <view class="price-wrap">
      <Price :price="total" />
    </view>-->
    <view class="data-box-wrap">
      <DataBox :data="dataBoxData" title="今日业绩" />
    </view>

    <view class="statistics-wrap">
      <Statistics :data="statistics" />
    </view>
  </view>
</template>

<script>
import { mapActions, mapMutations, mapGetters } from "vuex";
import ShopInfo from "./ShopInfo.vue";
// import SelectBox from "./SelectBox.vue";
import Price from "./Price.vue";
import Statistics from "../../../../components/public/Statistics/index.vue";
import DataBox from "../../../../components/public/DataBox/index.vue";
import { EMIT_TYPE } from "../../../../config/consts";
export default {
  components: { ShopInfo, Statistics, DataBox, Price },
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      homeData: "homeData",
      global: "global"
    }),
    statistics() {
      let average = (!this.homeData.dealCount
        ? 0
        : this.homeData.turnover / this.homeData.dealCount
      ).toFixed(2);
      return [
        {
          label: "待配送订单",
          value: this.homeData.pendingDeliveryOrder || 0,
          fun: () => {
            let params = {
              status: 2,
              showOrderType: 0
            };
            this.SET_GLOBAL_DATA({ ORDER_PAGE_INIT_DATA: params });
            // global.ORDER_PAGE_INIT_DATA = params;
            console.log(
              "global.ORDER_PAGE_INIT_DATA1",
              global.ORDER_PAGE_INIT_DATA
            );

            if (this.global.ORDER_PAGE_HAS_SHOW) {
              uni.$emit(EMIT_TYPE.SET_ORDER_STATUS, params);
            }

            this.$goto("/pages/order/order", params, "tab");
          }
        },
        {
          label: "待处理退款单",
          value: 0,
          fun: () => {
            // let params = {
            //   status: 1,
            //   type: 0
            // };
            // global.ORDER_PAGE_INIT_DATA = params;
            // if (global.ORDER_PAGE_HAS_SHOW) {
            //   uni.$emit(EMIT_TYPE.SET_ORDER_STATUS, params);
            // }
            // this.$goto("/pages/order/order", params, "tab");
          }
        }
      ];
    },
    dataBoxData() {
      let average = (!this.homeData.dealCount
        ? 0
        : this.homeData.turnover / this.homeData.dealCount
      ).toFixed(2);
      return [
        {
          icon: "/static/images/data-box/qian.png",
          label: "营业总额",
          value: Number(this.homeData.turnover || 0).toFixed(2)
        },
        {
          icon: "/static/images/data-box/dingdan.png",
          label: "成交订单",
          value: this.homeData.dealCount || 0
        },
        {
          icon: "/static/images/data-box/member.png",
          label: "新增会员",
          value: this.homeData.newMemberNum || 0,
          fun: () => {
            this.$goto("member");
          }
        },
        {
          icon: "/static/images/data-box/chongzhi.png",
          label: "客单价",
          value: Number(average).toFixed(2) || 0
        }
      ];
    }
  },
  methods: {
    ...mapMutations({ SET_GLOBAL_DATA: "SET_GLOBAL_DATA" }),
    ...mapActions({
      getOrders: "getOrders",
      putShop: "putShop"
    }),
    // 根据时间查询
    handleChangeDate(item) {
      let { startTime, endTime, name } = item;
      let params = {
        startTime,
        endTime
      };
      this.$emit("changeDate", item);
      this.getOrders(params);
    },
    // 修改营业状态
    handleChangeStatus(item) {
      let params = {
        businessStatus: item.value
      };
      this.putShop({ params });
    }
  }
};
</script>

<style scoped lang="scss">
.console-top {
  padding: 0 30rpx;
  background: $themeColor;
  // overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  // border-bottom-right-radius: 50% / 50%;
  // border-bottom-left-radius: 50% / 50%;
  .shop-info-wrap {
    margin-top: 20rpx;
  }
  .select-box-wrap {
    display: flex;
    justify-content: center;
    margin-top: 40rpx;
  }
  .price-wrap {
    display: flex;
    justify-content: center;
    margin-top: 45rpx;
  }
  .data-box-wrap {
    margin-top: 20rpx;
  }
  .statistics-wrap {
    // margin-top: 30rpx;
    margin-bottom: -40rpx;
  }
}
</style>
